<!--
 * @FileDescription 定义表
 * @Author 杨宇翔
 * @Date 20220610 15:33:58
 * @LastEditors 杨宇翔
 * @LastEditTime 20220610 15:33:58
-->
<template>
    <div>
        <table v-show="ProtocolComponent.Default.Data.value.length > 0">
            <tbody>
                <tr v-for="index of rows" :key="index">
                    <td v-for="(byte, offset) of ProtocolComponent.Default.Data.value.slice(column * index, column * (index + 1))"
                        :key="offset">
                        <span>{{ byte.toString(16).toUpperCase().padStart(2, '0') }}</span>
                        <span>{{ Calculate(column * index + offset + 1) }}</span>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import { ProtocolComponent } from './LaserRadarComponent';

const rows = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91, 92, 93, 94, 95, 96, 97, 98, 99, 100, 101, 102, 103, 104, 105, 106, 107, 108, 109, 110, 111, 112, 113, 114, 115, 116, 117, 118, 119, 120, 121, 122, 123, 124, 125, 126, 127, 128, 129, 130, 131, 132, 133, 134, 135, 136, 137, 138, 139, 140, 141, 142, 143, 144, 145, 146, 147, 148, 149, 150, 151, 152, 153, 154, 155];
const column = 16;

const map = [1, 9, 21, 31, 32, 43, 143, 243, 343, 443, 543, 643, 743, 843, 943, 1043, 1143, 1243, 1247];

function Calculate(item: number): string {
    const index = map.indexOf(item);
    return index == -1 ? '' : `${index + 1}`;
}
</script>

<style scoped>
div {
    max-height: 40rem;
    overflow-y: overlay;
}

table {
    height: 100%;

    margin-top: 2rem;
    margin-left: 4rem;
    margin-right: 4rem;
}

td {
    position: relative;

    width: 12.5rem;
    height: 4.5rem;
}

th {
    color: #B1B1D4;
    font-size: 1.6rem;
    font-weight: 500;

    text-align: center;
}

td {
    text-align: center;
}

td>span:first-of-type {
    color: #B1B1D4;
    font-size: 2.4rem;
    font-weight: bold;
}

td>span:last-of-type:empty {
    display: none;
}

td>span:last-of-type {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -50%);

    display: inline-block;
    width: 2.4rem;
    height: 2.4rem;

    color: #0E0E15;
    font-size: 1.6rem;
    font-weight: 500;

    border-radius: 50%;
    background-color: #36B555;
}
</style>